<script setup>
</script>

<template>
  <!-- <div class="main-container ">
    <div data-v-3a1c6e4b="" class="content">
      <div class="brand position ">
        <div class="logo "></div>
      欢迎下载好集运APP
      </div>
    </div>
  </div> -->

  <div class="appDownloadBg w-screen h-screen relative">
    <div class=" w-[240px] absolute top-[30px] left-[50px] z-100"><img src="@/assets//logo01.png"></div>
    <div class="absolute right-1/2 top-1/2 -translate-y-1/2  translate-x-1/2  flex flex-col items-center w-[90%] h-[80%] gap-2 bg2 ">
    </div>
    <div class="absolute right-1/2 top-1/2 -translate-y-1/2  translate-x-1/2  flex flex-col items-center w-[90%] h-[80%] gap-2   ">
    
      <h4 class="text-center text-[black] text-[5em] mb-4 mt-20">好集運</h4>
      <h4 class="text-center text-[black] text-[3em] mb-4">集運選好集運，好集運真好運</h4>
      <a
        href="https://apps.apple.com/cn/app/%E5%A5%BD%E9%9B%86%E8%BF%90/id6480483120"
        target="_blank"
        class="block bg-[#ff9959] w-[20%] h-[80px] leading-[80px] text-center rounded-3xl"
        >iPhone版本：前往appStore下载</a
      >
      <a
        href="https://test.bmdlog-tech.com/app.apk"
        target="_blank"
        class="block text-center bg-[#ff9959] w-[20%] h-[80px] leading-[80px] rounded-3xl"
        >Android版 直接下载</a
      >
      <a
        href="http://m.haojiyun.net/#/"
        target="_blank"
        class="block bg-[#ff9959] w-[20%] h-[80px] leading-[80px] text-center rounded-3xl"
        >网页版</a
      >
      <div class="flex-1 flex flex-col lg:flex-row mt-20">
        <div class="mx-3">
          <img src="@/assets/img/donwloadAppQR.png" alt="" class="mx-[auto] w-[100px]" />
          <div class="text-[#999] text-center text-xs pt-1 py-3">Android版</div>
        </div>
        <div class="mx-3">
          <img src="@/assets/img/haojiyun_ios_down.png" alt="" class="mx-[auto] w-[100px]" />
          <div class="text-[#999] text-center text-xs pt-1 py-3">iPhone 版</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.appDownloadBg {
  background: url(@/assets/img/AppDownloadBg/bannerBg1.png) #f8f8f9 top center no-repeat;
  background-size: 100% 100%;
  color: #fff;
}
.bg2 {
  background: url(@/assets/img/AppDownloadBg/message_center.jpg) #f8f8f9 top center no-repeat;
  background-size: 100% 100%;
  color: #000020;
  filter: blur(5px);
}

@media screen and (min-width: 900px) {
  .main-container {
    font-size: 1.5rem;
    background: url(@/assets/img/welcome-cover.jpg) no-repeat center center fixed;
    background-size: cover;
  }
  .main-container .content {
    background-color: #212529e6;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .main-container .content .header {
    position: absolute;
    left: 0;
    top: 40px;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 1000px;
    height: 60px;
    display: flex;
    align-items: center;
  }
  .main-container .content .header .header-logo {
    width: 80px;
    height: 80px;
    padding-left: 30px;
    margin-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main-container .content .header .header-logo .header-logo-img {
    width: 100%;
    border-radius: 6px;
  }
}
/*  */
.main-container .content .download .download-content .download-content-item .icon {
  background: hsla(255, 100%, 100%, 0.2);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
}
.main-container .content .download .download-content .download-content-item .icon img {
  width: 2em;
  height: 2em;
}
.main-container {
  width: 100vw;
  height: 100vh;
  background: url(@/assets/img/welcome-cover.jpg) no-repeat center center fixed;
  background-size: cover;
  font-size: 5vw;
  position: relative;
}
.main-container .content {
  width: 100%;
  height: 100%;
  background-color: #212529e6;
  overflow: auto;
  position: relative;
  padding: 0 1.5em;
  z-index: 99999;
}
.main-container .content .download .download-content .download-content-item .icon {
  background: hsla(255, 100%, 100%, 0.2);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
}

/*  */
.bg_slogan,
.logo {
  display: block;
  margin: 0 auto 25px;
  width: 200px;
  height: 200px;
}
.logo {
  width: 83px;
  height: 83px;
  background: url(@/assets/logo01.png) no-repeat 50%;
  background-size: 100%;
  -moz-background-size: 100%;
  -webkit-backgrund-size: 100%;
  -ms-backgrund-size: 100%;
}

.bg_slogan {
  width: 100%;
}

.bg_slogan,
.logo {
  display: block;
  margin: 0 auto 25px;
  color: #fff;
  text-align: center;
}
img {
  overflow-clip-margin: content-box;
  overflow: clip;
}
</style>
